<template>
  <div>
    <el-menu :default-active="active" mode="horizontal" active-text-color="#ec4141" router>
      <el-menu-item index="1" route="/pageOne/recommend">个性推荐</el-menu-item>
      <el-menu-item index="2" route="/pageOne/customized">歌单</el-menu-item>
      <el-menu-item index="3" route="/pageOne/Rank">排行榜</el-menu-item>
      <el-menu-item index="4" route="/pageOne/Artists">歌手</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: '1',
    };
  },

  watch: {
    $route(to, from) {
      this.ifPath();
    },
  },
  mounted() {
    this.ifPath();
  },
  methods: {
    ifPath() {
      if (this.$route.path === '/pageOne/recommend') {
        this.active = '1';
      } else if (this.$route.path === '/pageOne/customized') {
        this.active = '2';
      } else if (this.$route.path === '/pageOne/Rank') {
        this.active = '3';
      } else {
        this.active = '4';
      }
    },
  },
};
</script>

<style scoped>
</style>
